import {PageContainer} from "@ant-design/pro-layout";
import ProCard, {StatisticCard} from "@ant-design/pro-card";
import ProTable, {ActionType} from "@ant-design/pro-table";
import {deleteRechargeRecord, getRecharges, getRechargesAllPrice} from "@/services/ant-design-pro/FinancialOperation";
import {useRef, useState} from "react";
import {ProFormRadio} from "@ant-design/pro-form";
import {Form, Image, message, Popconfirm} from "antd";

const Recharge = () => {
	const [cardData,setCardData] = useState({})
	const [search,setSearch] = useState({})
	const [paymentSearch,setPaymentSearch] = useState({})
	const actionRef = useRef<ActionType>();  // 搜索状态更新
	const columns = [
		{
			title: 'ID',
			dataIndex: 'id',
			align: 'center',
			search:false
		},
		{
			title: '头像',
			dataIndex: 'oreder?.pay_price',
			align: 'center',
			search:false,
			render: (_, rouder) => {
				return (
					<Image
						width={50}
						src={rouder.user?.avatar_url}
					/>
				)
			}
		},
		{
			title: '用户昵称',
			dataIndex: 'type',
			align: 'center',
			render: (_, rouder) => {
				return (
					<div>{rouder.user?.nickname}</div>
				)
			}
		},
		{
			title: '订单号',
			dataIndex: 'order_number',
			align: 'center',
		},
		{
			title: '支付金额',
			dataIndex: 'price',
			align: 'center',
			search: false

		},
		{
			title: '充值类型',
			align: 'center',
			dataIndex: 'recharge_typec',
			search: false
		},
		{
			title: '支付时间',
			align: 'center',
			dataIndex: 'pay_time',
			search: false
		},
		{
			title: '操作',
			valueType: 'option',
			width: 150,
			align: 'center',
			fixed: 'right',
			render: (_, record,) =>
				[
					<Popconfirm
						title="你确定要删除充值记录吗? "
						onConfirm={async () => {
							await deleteRechargeRecord(record.id)
							message.success('充值记录删除成功')
							actionRef.current?.reload()
						}}
						okText="确定"
						cancelText="取消"
					>
						<a >删除</a>
					</Popconfirm>
				],
		},
	];
  return (
	  <PageContainer
		  header={{title: '充值记录', breadcrumb: {},}}
	  >
		  <ProCard>
			  <Form
			  	onValuesChange={(value) => {
					switch (value.timeButton) {
						case '1':
							setSearch({
								...search,
								...{time: undefined }
							})
							break;
						case '2':
							setSearch({
								...search,
								...{time: 'today'}
							})
							break;
						case '3':
							setSearch({
								...search,
								...{time: 'yesterday'}
							})
							break;
						case '4':
							setSearch({
								...search,
								...{time: 'week'}
							})
							break;
						case '5':
							setSearch({
								...search,
								...{time: 'thirty'}
							})
							break;
						case '5':
							setSearch({
								...search,
								...{time: 'month'}
							})
							break;
						case '5':
							setSearch({
								...search,
								...{time: 'year'}
							})
							break;
					}
					switch (value.paymentButton) {
						case '1':
							setPaymentSearch({
								...paymentSearch,
								...{is_paid: undefined }
							})
							break;
						case '2':
							setPaymentSearch({
								...paymentSearch,
								...{is_paid: '0'}
							})
							break;
						case '3':
							setPaymentSearch({
								...paymentSearch,
								...{is_paid: '1'}
							})
							break;
					}
						actionRef.current?.reload()
				}}
			  >
			  <ProFormRadio.Group
				  name="timeButton"
				  label="时间选择"
				  radioType="button"
				  initialValue="1"
				  options={[
					  {
						  label: '全部',
						  value: '1',
					  },
					  {
						  label: '昨天',
						  value: '2',
					  },
					  {
						  label: '今天',
						  value: '3',
					  },
					  {
						  label: '本周',
						  value: '4',
					  },
					  {
						  label: '本月',
						  value: '5',
					  },
					  {
						  label: '本季度',
						  value: '6',
					  },
					  {
						  label: '本年',
						  value: '7',
					  },
				  ]}
			  />
			  <ProFormRadio.Group
				  name="paymentButton"
				  label="支付类型"
				  radioType="button"
				  initialValue="1"
				  options={[
					  {
						  label: '全部',
						  value: '1',
					  },
					  {
						  label: '已支付',
						  value: '2',
					  },
					  {
						  label: '未支付',
						  value: '3',
					  },
				  ]}
			  />
			  </Form>
		  </ProCard>
		  <ProCard style={{marginTop: 10,}} gutter={[16, 16]}>
				  <StatisticCard
					  bordered
					  statistic={{
						  value: `${12}`,
						  description: '待提现金额',
						  icon: (
							  <img
								  style={{display: 'block', width: 60, height: 60,}}
								  src="https://gw.alipayobjects.com/mdn/rms_7bc6d8/afts/img/A*pUkAQpefcx8AAAAAAAAAAABkARQnAQ"
								  alt="icon"
							  />
						  )
					  }}
				  />
				  <StatisticCard
					  bordered
					  statistic={{
						  value: `${32}`,
						  description: '佣金总金额',
						  icon: (
							  <img
								  style={{display: 'block', width: 60, height: 60,}}
								  src=" https://gw.alipayobjects.com/mdn/rms_7bc6d8/afts/img/A*dr_0RKvVzVwAAAAAAAAAAABkARQnAQ"
								  alt="icon"
							  />
						  )
					  }}
				  />
				  <StatisticCard
					  bordered
					  statistic={{
						  value: `${323}`,
						  description: '已提现金额',
						  icon: (
							  <img
								  style={{display: 'block', width: 60, height: 60,}}
								  src="https://gw.alipayobjects.com/mdn/rms_7bc6d8/afts/img/A*-jVKQJgA1UgAAAAAAAAAAABkARQnAQ"
								  alt="icon"
							  />
						  )
					  }}
				  />
				  <StatisticCard
					  bordered
					  statistic={{
						  value: `${32}`,
						  description: '未提现金额',
						  icon: (
							  <img
								  style={{display: 'block', width: 60, height: 60,}}
								  src="https://gw.alipayobjects.com/mdn/rms_7bc6d8/afts/img/A*FPlYQoTNlBEAAAAAAAAAAABkARQnAQ"
								  alt="icon"
							  />
						  )
					  }}
				  />
			  </ProCard>
			  <ProTable
				  columns={columns}
				  scroll={{x:1400}}
				  actionRef={actionRef}
				  request={async (params = {}, sort, filter) => {
					  let {data} = await getRecharges({...params,...sort,...filter,...search,...paymentSearch,include: 'user'})
					  // let data1 = await getRechargesAllPrice({...params})
					  // setCardData(data1)
					  return {
						  // data:data1,
						  data,
						  success:true
					  }
				  }}
				  editable={{
					  type: 'multiple',
				  }}
				  columnsState={{
					  persistenceKey: 'pro-table-singe-demos',
					  persistenceType: 'localStorage',
				  }}
				  rowKey="id"
				  search={{
					  defaultCollapsed: false,
				  }}
				  form={{
					  // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
					  syncToUrl: (values, type) => {
						  if (type === 'get') {
							  return {
								  ...values,
								  created_at: [values.startTime, values.endTime],
							  };
						  }
						  return values;
					  },
				  }}
				  dateFormatter="string"
				  headerTitle="充值记录列表"
				  toolBarRender={() => [

				  ]}
			  />
    </PageContainer>
  );
};

export default Recharge;
